<template>
	<view class="shopping-details">
		<view>
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" height="750rpx"
				bgColor="#FFFFFF" radius="0" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="row-1 app-pages">
			<view class="cell">
				<view class="price">
					<text style="font-size:36rpx; margin-bottom: 8rpx;">￥</text>
					<text>{{price}}</text>
				</view>
				<view class="yhj" @click="handleCoupon">
					<text>优惠卷</text>
					<u-icon name="arrow-right" size="12" color="#FD8F19"></u-icon>
				</view>
			</view>
			<view class="title">{{detailsData.goodsName}}</view>
		</view>

		<view class="row-2 app-pages">
			<view class="cell" @click="handleSeletorRule">
				<view class="" style="display: flex;">
					<view class="label">规格</view>
					<view class="tips">{{ruleTips}}</view>
				</view>
				<u-icon name="arrow-right" size="12" color="#5A5A5A"></u-icon>
			</view>
			<view class="cell" @click="handleSeletorAddress">
				<view class="" style="display: flex;">
					<view class="label">送至</view>
					<view class="tips">{{comAddress}}</view>
				</view>
				<u-icon name="arrow-right" size="12" color="#5A5A5A"></u-icon>
			</view>
			<view class="cell" @click="handleSeletorParmas">
				<view class="" style="display: flex;">
					<view class="label">参数</view>
					<view class="tips">{{comParmas}}</view>
				</view>
				<u-icon name="arrow-right" size="12" color="#5A5A5A"></u-icon>
			</view>
		</view>
		<view class="row-video" v-if="detailsData.goodsVideoAddress">
			<video :src="realmName + detailsData.goodsVideoAddress" style="width: 100%;" :loop="true" controls
			:muted="true" :autoplay="true"></video>
		</view>
		<view class="row-3">
			<view v-for="(item,index) in detailsData.detailAddress" :key="index">
				<image class="image" :src="realmName + item" mode="widthFix"></image>
			</view>
		</view>
		<!-- 评价 -->
		<view class="row-4">
			<evaluate-list ref="evaluate-list"></evaluate-list>
		</view>

		<!-- 地址 -->
		<view class="row-5">
			<shopping-details-address @click="handleSelectorAdderss" ref="shopping-details-address">
			</shopping-details-address>
		</view>

		<!-- 规格 -->
		<view class="row-6">
			<shopping-details-rule :listData="detailsData.wcGoodsParameterList" ref="shopping-details-rule">
			</shopping-details-rule>
		</view>

		<!-- 选择规格购买 -->
		<view class="row-7">
			<shopping-details-buy :listData="ruleData" @change="handleBuyChange" @num="handleBuyInput" @buy="handleBuy"
				ref="shopping-details-buy" :listDataEd="tableData"></shopping-details-buy>
		</view>

		<!-- 查看商品优惠卷 -->
		<view class="row-8">
			<shopping-details-coupon :state="1" ref="shopping-details-coupon" />
		</view>

		<!-- 底部按钮 -->
		<view class="tabbar">
			<view class="box">
				<view class="box-col-1">
					<image src="/static/culturalCreativity/icon-home.png" mode="aspectFit" class="icon1"
						@click="handleTabbar(0)"></image>
					<image src="/static/culturalCreativity/icon-class.png" mode="aspectFit" class="icon2"
						@click="handleTabbar(1)"></image>
					<image src="/static/culturalCreativity/icon-car.png" mode="aspectFit" class="icon3"
						@click="handleTabbar(2)"></image>
				</view>
				<view class="box-col-2">
					<view class="btn-jion" @click="handleJoin">加入购物车</view>
					<view class="btn-buy" @click="handlelijiBuy">立即购买</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import evaluateList from "../components/evaluate-list.vue";
	import shoppingDetailsAddress from "../components/shopping-details-address.vue";
	import shoppingDetailsRule from "../components/shopping-details-rule.vue";
	import shoppingDetailsBuy from "../components/shopping-details-buy.vue";
	import shoppingDetailsCoupon from "../components/shopping-details-coupon.vue";
	import {
		findWcGoods
	} from "@/culturalCreativity/http/home.js";
	import {
		realmName
	} from "@/http";
	export default {
		components: {
			evaluateList,
			shoppingDetailsAddress,
			shoppingDetailsRule,
			shoppingDetailsBuy,
			shoppingDetailsCoupon
		},
		data() {
			return {
				list6: [],
				realmName,
				currentNum: 0,
				detailsData: {},
				shopingRouleInfo: [],
				tableData: [], //商品规格表格列表
				ruleData: [], //商品规格处理后列表
				selecotrIndex: [],
				input: "1", //商品个数
				address: {}, //地址
				price: '',
				id: "", //当前商品id
			}
		},
		async onLoad({
			id
		}) {
			try {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.id = id;
				let res = await findWcGoods(id);
				this.detailsData = res.data.data;
				this.list6 = this.detailsData.goodsPicAddress.split(",").map(item => {
					return `${realmName}${item}`
				});
				this.detailsData.detailAddress = this.detailsData.detailAddress.split(",");
				this.getRuleData(res.data.data);
				if (!this.selecotrIndex.length) {
					this.ruleData.forEach((item, index) => {
						for (let i = 0; i < item.ch.length; i++) {
							this.selecotrIndex.push({
								index,
								_index: i,
								z: `${index}_${i}`
							});
							break;
						}
					})
				};
				this.$refs['evaluate-list'].init(this.detailsData.goodsId);
				uni.hideLoading();
			} catch (e) {
				uni.hideLoading();
				console.error(`shoppingDetails.vue`, e);
				//TODO handle the exception
			}
		},
		methods: {
			handleSelectorAdderss(options) {
				this.address = options;
			},
			handleTabbar(index) {
				uni.redirectTo({
					url: "/culturalCreativity/index?index=" + index
				})
			},
			async getPageData(goodsPic) {
				let obj = {}
				this.selecotrIndex.forEach(item => {
					obj[`title${item.index+1}`] = this.ruleData[item.index].title;
					obj[`title${item.index+1}Val`] = this.ruleData[item.index].ch[item._index];
				});
				let list = this.tableData.reduce((pev, item) => {
					let lock = [...Object.keys(obj)].some(i => {
						return obj[i] != item[i];
					});
					if (!lock) {
						pev.push({
							...this.detailsData,
							...item,
							shoppingNumber: this.input,
							goodsPic,
							specificationName: `${item.title1 || ''} ${item.title1Val || ''} ${item.title2 || ''} ${item.title2Val || ''}`
						});
					}
					return pev;
				}, [])
				list[0].num = this.input;
				uni.setStorageSync('PAGE_DATA', {
					list, //商品
					address: this.address || {},
				});
				return {
					list, //商品
					address: this.address,
				};
			},
			handleCoupon() {
				this.$refs['shopping-details-coupon'].init(this.id);
			},
			async handleBuy(path) {
				await this.getPageData(path);
				uni.navigateTo({
					url: "/culturalCreativity/common/sureOrder"
				});
			},
			async handleBuyChange(e) {
				this.selecotrIndex = e;
				this.getPageData();
			},
			async handleBuyInput(e) {
				this.input = e;
				this.getPageData();
			},
			async handlelijiBuy() {
				await this.getPageData();
				this.$refs['shopping-details-buy'].init();
			},
			async handleJoin() {
				await this.getPageData();
				this.$refs['shopping-details-buy'].init();
			},
			handleSeletorParmas() {
				this.$refs['shopping-details-rule'].init();
			},
			handleSeletorRule() {
				this.$refs['shopping-details-buy'].init();
			},
			handleSeletorAddress() {
				this.$refs['shopping-details-address'].init(this.address);
			},
			getRuleData(options) {
				this.shopingRouleInfo = options.wcGoodsSpecificationNameList.map(item => {
					return {
						name: item.specificationName,
						pic: item.specificationPic,
						arr: item.specificationValue.split(",").filter(item => item).map(name => {
							return {
								name
							}
						})
					}
				});
				this.saveTable(options.wcGoodsSpecificationList);
			},
			saveTable(options) {
				let arr = [];
				let indexNumb = 0;
				if (!(this.shopingRouleInfo[0] && this.shopingRouleInfo[0].arr)) return;
				this.shopingRouleInfo[0].arr.forEach(item => {
					let obj = {
						mealCardPay: options ? options[indexNumb].mealCardPay : '',
						recommendation: options ? options[indexNumb].recommendation : '',
						platformSpecificationCode: options ? options[indexNumb]
							.platformSpecificationCode : '',
						productDescription: options ? options[indexNumb]
							.productDescription : '',
						goodsAttribute: options ? options[indexNumb].goodsAttribute : '',
						specificationId: options ? options[indexNumb].specificationId : '',
						platformItemCode: options ? options[indexNumb].platformItemCode : '',
						platformSpecificationCode: options ? options[indexNumb].platformSpecificationCode : '',
						ispost: options ? options[indexNumb].ispost : ''
					};
					if (this.shopingRouleInfo[1] && this.shopingRouleInfo[1].arr.length) {
						this.shopingRouleInfo[1].arr.forEach(i => {
							arr.push({
								title1: this.shopingRouleInfo[0].name,
								title1Val: item.name,
								title2: this.shopingRouleInfo[1].name,
								title2Val: i.name,
								...obj
							});
							indexNumb = indexNumb + 1;
						});
					} else {
						arr.push({
							title1: this.shopingRouleInfo[0].name,
							title1Val: item.name,
							...obj
						});
						indexNumb = indexNumb + 1;
					};
				});
				this.tableData = arr;
				this.price = this.tableData[0].mealCardPay;
				this.getShowRuleData(arr);
			},
			getShowRuleData(data) {
				let s = [];
				let d = ['title1', 'title1Val', 'title2', 'title2Val']
				d.forEach((i, index) => {
					if (!s[index]) s[index] = [];
					data.forEach(o => {
						if (o[i]) {
							s[index].push(o[i])
						}
					})
				});
				s = s.map(item => [...new Set(item)]);
				let b = s.reduce((pev, item) => {
					let len = pev.length == 0 ? 1 : pev.length;
					if (!Array.isArray(pev[len - 1])) {
						pev[len - 1] = [];
					};
					if (pev[len - 1].length == 2) {
						pev.push([]);
						pev[len].push(item);
					} else {
						pev[len - 1].push(item)
					}
					return pev;
				}, []).map(item => {
					return {
						title: item[0][0],
						ch: item[1]
					}
				});
				this.ruleData = b.reduce((pev, item) => {
					this.shopingRouleInfo.forEach(i => {
						if (i.name == item.title) {
							pev.push({
								...item,
								pic: i.pic
							})
						}
					});
					return pev
				}, []);
			}
		},
		computed: {
			comAddress() {
				if (!this.address || !this.address.location) return '';
				return `${this.address.location || ''} ${this.address.detailedAddress || ''}`
			},
			comParmas() {
				let data = this.detailsData.wcGoodsParameterList;
				if (!data) return '';
				return data.reduce((pev, item) => {
					pev = pev + item.goodsParameterName + ': ' + item.parameter + ' ';
					return pev
				}, "");
			},
			ruleTips() {
				let str = this.selecotrIndex.reduce((pev, item) => {
					pev = pev + this.ruleData[item.index].ch[item._index]
					return pev;
				}, '');
				if (!str) return ''
				return `${str} ${this.input}个`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopping-details {
		padding-bottom: 200rpx;

		.tabbar {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 1;
			height: calc(env(safe-area-inset-bottom) + 126rpx);
			background-color: #FFFFFF;
			bottom: env(safe-area-inset-bottom);
			box-sizing: border-box;
			padding: 10rpx 32rpx;
			box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);

			.box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn-jion {
					width: 196rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					border: 2rpx solid #FD8F19;
					font-size: 32rpx;
					font-weight: 400;
					color: #FD8F19;
				}

				.btn-buy {
					margin-left: 12rpx;
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #FD8F19;
					border-radius: 40rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.box-col-1,
				.box-col-2 {
					display: flex;
				}

				.icon1,
				.icon2,
				.icon3 {
					width: 48rpx;
					height: 48rpx;
				}

				.icon2 {
					margin: 0 49rpx;
				}
			}
		}

		.row-4 {
			margin-top: 24rpx;
		}

		.row-3 {
			margin-top: 24rpx;
			border-radius: 30rpx;
			overflow: hidden;

			.image {
				width: 100%;
				display: block;
			}
		}

		.row-2 {
			margin-top: 24rpx;
			border-radius: 30rpx;
			background-color: #FFFFFF;

			.cell {
				height: 97rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

				.label {
					font-weight: 500;
					color: #1F1F1F;
				}

				.tips {
					margin-left: 32rpx;
					font-weight: 400;
					color: #5A5A5A;
					width: 550rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				&+.cell {
					border-top: 1px solid #EEEEEE;
				}
			}
		}

		.row-1 {
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
			border-radius: 0rpx 0rpx 30rpx 30rpx;

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.price {
					font-size: 60rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					color: #FD8F19;
					display: flex;
					align-items: flex-end;
				}

				.yhj {
					font-size: 24rpx;
					font-weight: 500;
					color: #FD8F19;
					display: flex;
					align-items: center;
				}
			}

			.title {
				margin-top: 16rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #1F1F1F;
				line-height: 40rpx;
			}
		}

		&::after {
			content: "";
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			background-color: #F7F7F7;
		}
	}


	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
